<template>
  <div class="w-full min-h-screen bg-gray-50 relative">
    <div class="bg-white border-b border-gray-100">
      <div class="flex items-center justify-between px-4 py-3">
        <div class="flex items-center">
          <button @click="$router.back()" class="mr-4 text-gray-600">
            <i class="fas fa-arrow-left"></i>
          </button>
          <h1 class="text-lg font-semibold text-gray-800">通用设置</h1>
        </div>
      </div>
    </div>

    <div class="px-4 py-6 pb-20">
      <div class="bg-white rounded-lg shadow-sm">
        <div class="p-4 border-b border-gray-100">
          <h3 class="font-semibold text-gray-800 mb-2">界面设置</h3>
          <div class="space-y-4">
            <div class="flex items-center justify-between">
              <span class="text-gray-700">深色模式</span>
              <label class="relative inline-flex items-center cursor-pointer">
                <input v-model="generalSettings.darkMode" type="checkbox" class="sr-only peer" />
                <div
                  class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"
                ></div>
              </label>
            </div>
            <div class="flex items-center justify-between">
              <span class="text-gray-700">自动旋转屏幕</span>
              <label class="relative inline-flex items-center cursor-pointer">
                <input v-model="generalSettings.autoRotate" type="checkbox" class="sr-only peer" />
                <div
                  class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"
                ></div>
              </label>
            </div>
            <div class="flex items-center justify-between">
              <span class="text-gray-700">字体大小</span>
              <select v-model="generalSettings.fontSize" class="px-3 py-2 border border-gray-300 rounded-lg text-sm">
                <option value="small">小</option>
                <option value="medium">中</option>
                <option value="large">大</option>
              </select>
            </div>
          </div>
        </div>

        <div class="p-4 border-b border-gray-100">
          <h3 class="font-semibold text-gray-800 mb-2">网络设置</h3>
          <div class="space-y-4">
            <div class="flex items-center justify-between">
              <span class="text-gray-700">自动播放视频</span>
              <label class="relative inline-flex items-center cursor-pointer">
                <input v-model="generalSettings.autoPlay" type="checkbox" class="sr-only peer" />
                <div
                  class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"
                ></div>
              </label>
            </div>
            <div class="flex items-center justify-between">
              <span class="text-gray-700">节省流量模式</span>
              <label class="relative inline-flex items-center cursor-pointer">
                <input v-model="generalSettings.saveData" type="checkbox" class="sr-only peer" />
                <div
                  class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"
                ></div>
              </label>
            </div>
          </div>
        </div>

        <div class="p-4 border-b border-gray-100">
          <h3 class="font-semibold text-gray-800 mb-2">存储管理</h3>
          <div class="space-y-4">
            <div class="flex items-center justify-between">
              <div>
                <div class="text-gray-700 font-medium">缓存清理</div>
                <div class="text-sm text-gray-500">当前缓存：2.3GB</div>
              </div>
              <button class="px-4 py-2 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition-colors">
                清理
              </button>
            </div>
            <div class="flex items-center justify-between">
              <div>
                <div class="text-gray-700 font-medium">下载管理</div>
                <div class="text-sm text-gray-500">已下载：5 个视频</div>
              </div>
              <button class="px-4 py-2 bg-green-600 text-white text-sm rounded-lg hover:bg-green-700 transition-colors">
                管理
              </button>
            </div>
          </div>
        </div>

        <div class="p-4 border-b border-gray-100">
          <h3 class="font-semibold text-gray-800 mb-2">语言和地区</h3>
          <div class="space-y-4">
            <div class="flex items-center justify-between">
              <span class="text-gray-700">语言</span>
              <select v-model="generalSettings.language" class="px-3 py-2 border border-gray-300 rounded-lg text-sm">
                <option value="zh-CN">简体中文</option>
                <option value="zh-TW">繁体中文</option>
                <option value="en-US">English</option>
              </select>
            </div>
            <div class="flex items-center justify-between">
              <span class="text-gray-700">时区</span>
              <select v-model="generalSettings.timezone" class="px-3 py-2 border border-gray-300 rounded-lg text-sm">
                <option value="Asia/Shanghai">北京时间</option>
                <option value="America/New_York">纽约时间</option>
                <option value="Europe/London">伦敦时间</option>
              </select>
            </div>
          </div>
        </div>

        <div class="p-4">
          <h3 class="font-semibold text-gray-800 mb-2">其他</h3>
          <div class="space-y-3">
            <button class="w-full p-3 text-left bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
              <div class="flex items-center justify-between">
                <span class="text-gray-700">清除缓存</span>
                <i class="fas fa-trash-alt text-gray-500"></i>
              </div>
            </button>
            <button class="w-full p-3 text-left bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
              <div class="flex items-center justify-between">
                <span class="text-gray-700">系统信息</span>
                <i class="fas fa-info-circle text-gray-500"></i>
              </div>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const generalSettings = ref({
  darkMode: false,
  autoRotate: true,
  fontSize: 'medium',
  autoPlay: true,
  saveData: false,
  language: 'zh-CN',
  timezone: 'Asia/Shanghai'
})
</script>
